import { computed, defineComponent, PropType, ref } from "vue";
import { ElButton, ElDialog, ElIcon } from "element-plus";
import { Close } from "@element-plus/icons-vue"; // 引入关闭图标组件
import Pagination from "@/components/Pagination";
import Style from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '@/config';
import { zyfyqdcxChild, zyfyqdcxItemInfo } from "@/api/typing";
import Table from "@/components/table";
import { Card } from "ant-design-vue";

export default defineComponent({
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ""
        },
        children: {
            type: Array as PropType<zyfyqdcxChild[]>,
            default: () => []
        },
        zje: {
            type: String,
            default: ""
        },
        jzks: {
            type: String,
            default: ""
        }
    },
    emits: {
        close: () => true
    },
    setup(props, { emit }) {
        const pageSize = ref(12);
        const showDatas = ref<zyfyqdcxItemInfo[]>([]);

        // 接收分页组件 分页数据
        const handlePageChange = (Datas: any) => {
            showDatas.value = Datas;
        };

        // 关闭弹窗
        const handleClose = () => {
            emit('close');
        };

        const datas = computed(() => {
            return props.children;
        });

        // 表格表头
        const tableColumns = ref([
            {
                title: '名称',
                dataIndex: 'sfxm_mc',
                align: "left" as "left",
                cellStyle: { fontSize: '28px' },
                headerStyle: { fontSize: '28px', fontWeight: 'bold' as "bold" },
            },
            {
                title: '金额',
                dataIndex: 'je',
                align: "left" as "left",
                cellStyle: { fontSize: '28px' },
                headerStyle: { fontSize: '28px', fontWeight: 'bold' as "bold" },
            },
        ]);

        return () => (
            <ElDialog
                modelValue={props.visible}
                showClose={false}
                class={Style.dialogCustom}
                onClose={handleClose}
                width="80%"
                style={{ borderRadius: '15px', overflow: 'hidden' }} // 确保圆角不被内容溢出破坏
            >
                {/* 自定义 Header 区域 */}
                <div class={Style.customHeader}>
                    <h2 class={Style.customTitle}>{props.title || ''}</h2>
                    <button
                        class={Style.customCloseBtn}
                        onClick={handleClose}
                    >
                        <ElIcon class={Style.closeIcon}><Close /></ElIcon>
                    </button>
                </div>

                {/* 原有头部信息（就诊科室+总金额）- 保持不变 */}
                <div class={Style.dialogHeader}>
                    <div style={{ fontWeight: 'bold' }}>就诊科室：{props.jzks}</div>
                    <div style={{ fontWeight: 'bold' }}>总金额：
                        <span style={{ color: 'red' }}>￥{props.zje}</span>
                    </div>
                </div>

                {/* 表格内容 */}
                <Table
                    columns={tableColumns.value}
                    data={showDatas.value}
                    tableStyle={{}}
                    containerStyle={{ marginLeft: "auto", marginRight: "auto", width: "90%", height: "100%" }}
                ></Table>

                {/* 分页组件 */}
                <Pagination
                    style={{ marginTop: "20px", padding: "0 64px", marginBottom: "10px" }}
                    pageSize={pageSize.value}
                    Data={datas.value}
                    onPageChange={handlePageChange}
                ></Pagination>

                <div style={{ textAlign: 'center', marginTop: '16px', paddingBottom: '20px' }}>
                    <ElButton
                        type="success"
                        onClick={handleClose}
                        class={Style.cancelBtn}
                        size="large"
                    >
                        取消
                    </ElButton>
                </div>
            </ElDialog>
        );
    }
});
